<template>
  <view class="page">
    <view class="top">
      <view class="banner">
        <image
          class="banner-pic"
          :src="require('@/static/img/crop-pic.png')"
          mode="aspectFit"
        />
      </view>
    </view>
    <view class="main">
      <view class="crop-info">
        <view class="crop-card">
          <image
            class="crop-card-pic"
            src="https://img2.baidu.com/it/u=2680936415,1600389660&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
            mode="scaleToFill"
          />
          <view>
            <view class="crop-card-text" style="margin-bottom: 44rpx"
              >作物名称: <text style="font-weight: bold">水稻</text>
            </view>
            <view class="crop-card-text" style="margin-bottom: 44rpx"
              >种植批次:<text style="font-weight: bold">YHSD202210102</text>
            </view>
            <view class="crop-card-text"
              >采收批次:<text style="font-weight: bold">YHSD202210102</text>
            </view>
          </view>
        </view>
      </view>
      <view class="video-list">
        <u-tabs
          style="margin-bottom: 30rpx"
          :list="list"
          lineColor="#1AC678"
          itemStyle=" height: 60px;font-size: 28rpx;width: 25%;text-align: center;"
          :activeStyle="{
            color: '#1AC678',
            fontWeight: 'bold',
          }"
          :inactiveStyle="{
            color: '#202020',
            fontWeight: 'bold',
          }"
        ></u-tabs>
        <view
          style="margin-bottom: 23rpx"
          v-for="(item, index) in 3"
          :key="index"
        >
          <video
            class="video-item"
            src="http://mirror.aarnet.edu.au/pub/TED-talks/911Mothers_2010W-480p.mp4"
          ></video>
          <view class="video-control">
            <view>c001摄像头</view>
            <view>正在播放</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "基地环境",
        },
        {
          name: "生产环境",
        },
        {
          name: "仓储环境",
        },
        {
          name: "出库环境",
        },
      ],
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
}
.top {
  width: 100%;
  height: 739rpx;
  background: #01bffd;
  padding: 32rpx 23rpx;
}
.banner {
  width: 100%;
  height: 373rpx;
  border-radius: 14rpx;
  &-pic {
    width: 100%;
    height: 100%;
  }
}
.main {
  position: relative;
  top: -270rpx;
  .crop-info {
    padding: 0 54rpx;
  }
  .crop-card {
    height: 321rpx;
    background: #ffffff;
    box-shadow: 0px 5px 11px 2px rgba(0, 0, 0, 0.16);
    border-radius: 14rpx;
    padding: 58rpx 32rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    &-pic {
      width: 207rpx;
      height: 207rpx;
      margin-right: 51rpx;
    }
    &-text {
      font-size: 21rpx;
      color: #202020;
    }
  }
}
.video-list {
  padding: 0 25rpx;
}
.video-item {
  width: 100%;
  height: 315rpx;
}
.video-control {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  font-weight: bold;
  color: #202020;
}
</style>
